<template>
  <div class="seller">
    <van-cell
      is-link
      icon="notes-o"
      :value-class="className"
      :value="timeValue"
      @click="showPopup" />
    <van-popup v-model="show" position="bottom">
      <!-- 年 -->
      <van-picker
        v-if="isShowYear"
        title="请选择"
        show-toolbar
        :columns="yearColumns"
        :default-index="yearSelect"
        @confirm="yearConfirm"
        @cancel="show = false"
      />
      <!-- 年月、年月日 -->
      <van-datetime-picker
        v-else
        v-model="currentDate"
        :type="datetype"
        title="请选择"
        :loading="isLoadingShow"
        :max-date="maxDate"
        :formatter="formatter"
        @cancel="show = false"
        @confirm="confirmPicker"
      />
    </van-popup>
  </div>
</template>

<script>

export default {
  props: {
    isShowYear: { // 是否展示年
      type: Boolean,
      default: false
    },
    datetype: { // 时间框类型 date: 年月日  year-month:年月
      type: String,
      default: 'date',
      require: false
    }
  },

  data () {
    return {
      timeValue: '',
      show: false,
      isLoadingShow: true,
      currentDate: null,
      maxDate: null,
      className: '',
      yearSelect: null,
      yearColumns: [],
    }
  },
  created() {
    if(this.isShowYear) {
      this.setTime()
      this.yearData()
    }
  },
  methods: {
    // 初始化数据 年月日或年月
    initDateTime(val, max = null) {
      this.timeValue = val
      this.currentDate = new Date(val) || new Date()
      if(max == null) {
        this.maxDate = new Date(val) || new Date(2099, 12, 31)
      } else {
        this.maxDate = new Date(max) || new Date(2099, 12, 31)
      }
    },
    // 显示弹窗
    showPopup () {
      this.show = true
      this.isLoadingShow = true
      setTimeout(() => {
        this.isLoadingShow = false
      }, 500)
    },
    // 确认选择的时间
    confirmPicker (val) {
      let year = val.getFullYear()
      let month = val.getMonth() + 1
      let day = val.getDate()
      if (month >= 1 && month <= 9) { month = `0${month}` }
      if (day >= 1 && day <= 9) { day = `0${day}` }
      this.className = 'timeClass'
      if (this.datetype === 'date') this.timeValue = `${year}-${month}-${day}`
      if (this.datetype === 'year-month') this.timeValue = `${year}-${month}`
      this.$emit('date', this.timeValue)
      this.show = false
    },
    // 选项格式化函数
    formatter (type, value) {
      if (type === 'year') {
        return `${value}`
      } else if (type === 'month') {
        return `${value}`
      } else if (type === 'day') {
        return `${value}`
      }
      return value
    },
    // 进入页面后默认最新时间
    setTime(){
      var nowTime = new Date();
      let year = nowTime.getFullYear()
      let month = nowTime.getMonth()
      let day = nowTime.getDate()
      var taskYear = ''
      taskYear = this.formatDates( new Date(year, month ,day))
      this.timeValue = taskYear.slice(0,4)
    },
    formatDates(date) {
      return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`
    },
     //年数据
    yearData() {
      // 获取默认显示的时间
      var nowTime = new Date(this.timeValue)
      let year = nowTime.getFullYear()
      let month = nowTime.getMonth()
      let day = nowTime.getDate()
      // 循环数组 填写最小时间和最大时间范围 推进数组
      for (let i = 1990; i < 2099; i++) {
        this.yearColumns.push(i)
      }
      // 格式化时间并截取
      var years = this.formatDates( new Date(year, month ,day))
      var Year = years.slice(0,4)
      // 将截取的年份赋值给绑定值 用于点击弹出日期窗口后显示当前的时间
      this.yearSelect = this.yearColumns.indexOf(Number(Year))
    },
    //年选择器
    yearConfirm(value) {
      this.timeValue = value.toString()
      this.show = false
    },
  }
}
</script>
<style lang="less" scoped>
.seller {
  .timeClass {
    color: #333;
  }
  /deep/ .van-cell__left-icon {
    color: #999;
  }
}

</style>